
{{template "base.html" .}}

{{define "content"}}
<div class="Div-Carousel">
<div class="layui-carousel" id="test1">
    <div carousel-item class="List-Carousel">

    </div>
</div>
</div>
<style>
    .Div-Carousel{
        padding: 80px 200px;
    }
    .Div-Carousel img{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .List-Carousel-Title{
        position: absolute;
        left: 5%;
        right: 5%;
        top: 70%;
        font-size: 50px;
        color: #fff;
    }
    .List-Carousel-Context{
        position: absolute;
        left: 5%;
        right: 5%;
        top: 80%;
        font-size: 20px;
        color: #fff;
    }
</style>
<script>
    $.ajax({
        method: "get",
        url: "/student/carousel/",
        async:false,
        success: function (res) {
            $(res.data).each(function (i,btn){
                var carousel_li = "<div><a href='"+res.data[i].Link+"' target=\"_blank\"><img src='"+res.data[i].Url+"'/></a><div class='List-Carousel-Title'>"+res.data[i].Title+"</div><div class='List-Carousel-Context'>"+res.data[i].Context+"</div></div>"

                $(".List-Carousel").append(carousel_li)
            })
        }
    })
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,height:'650px'
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });

</script>
{{end}}
